@import 'tailwindcss';
@import './tailwindcss-animate.css';

@custom-variant dark (&:where(.dark, .dark *));

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

/* These hsl values are also present in the ThemePreview component */
:root {
    --background: 0 0% 100%;
    --foreground: 221 39% 11%;

    --muted: 210 20% 98%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 221 39% 11%;

    --card: 0 0% 100%;
    --card-foreground: 221 39% 11%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;

    --primary: 96 64% 46%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 20% 98%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 220 14.29% 95.88%;
    --accent-foreground: 216.92 19.12% 26.67%;

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 0 0% 100%;

    --ring: 221 39% 11%;

    --radius: 0.375rem;

    --sidebar-background: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
}

.dark {
    --background: 220 60% 1.96%;
    --foreground: 0 0% 100%;

    --muted: 210 16.13% 12.16%;
    --muted-foreground: 207.69 35.14% 92.75%;

    --popover: 216 27.78% 7.06%;
    --popover-foreground: 207.69 35.14% 92.75%;

    --card: 216 27.78% 7.06%;
    --card-foreground: 210 40% 98%;

    --border: 215 14.63% 16.08%;
    --input: 215 12.24% 19.22%;

    --primary: 96 64.1% 45.88%;
    --primary-foreground: 60 100% 96.27%;

    --secondary: 215 15.38% 15.29%;
    --secondary-foreground: 0 0% 97.25%;

    --accent: 210 16.13% 12.16%;
    --accent-foreground: 207.69 35.14% 92.75%;

    --destructive: 359.59 67.74% 42.55%;
    --destructive-foreground: 0 0% 100%;

    --ring: 96 64.1% 45.88%;

    --sidebar-background: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
}
@theme inline {
    /* Fonts */
    --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'Source Code Pro Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Colors */
    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));
    --color-background: hsl(var(--background));
    --color-foreground: hsl(var(--foreground));
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));
    --color-caution: var(--color-red-500);
    --color-warning: var(--color-amber-500);
    --color-info: var(--color-sky-500);
    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));
    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));
    --color-sidebar: hsl(var(--sidebar-background));
    --color-sidebar-foreground: hsl(var(--sidebar-foreground));
    --color-sidebar-primary: hsl(var(--sidebar-primary));
    --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
    --color-sidebar-accent: hsl(var(--sidebar-accent));
    --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
    --color-sidebar-border: hsl(var(--sidebar-border));
    --color-sidebar-ring: hsl(var(--sidebar-ring));

    /* Border */
    --radius-xl: calc(var(--radius) + 4px);
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* Animations */
    --animate-accordion-down: 0.2s ease-out accordion-down;
    --animate-accordion-up: 0.2s ease-out accordion-up;
    --animate-caret-blink: 1.25s ease-out infinite caret-blink;

    /* Keyframes */
    @keyframes accordion-down {
        from: {
            height: 0;
        }

        to: {
            height: var(--bits-accordion-content-height);
        }
    }

    @keyframes accordion-up {
        from: {
            height: var(--bits-accordion-content-height);
        }

        to: {
            height: 0;
        }
    }

    @keyframes caret-blink {
        0%,
        70%,
        100% {
            opacity: 1;
        }

        20%,
        50% {
            opacity: 0;
        }
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}
